import React, { Component } from 'react'
import { Text, StyleSheet, View, TouchableOpacity } from 'react-native'
import { createStackNavigator } from '@react-navigation/stack'
import HomeScreen from '../screens/HomeScreen'
import TakePhotoScreen from '../screens/HomeScreen/TakePicture'

const Stack = createStackNavigator();
export default class HomeStack extends Component {
  render() {
    return (
      <Stack.Navigator
        initialRouteName="HomeScreen" 
        // screenOptions={{ headerStyle: { backgroundColor: 'papayawhip' } }}
        header= {null}
      >
        <Stack.Screen 
          name="HomeScreen" 
          component={ HomeScreen }
          options={{
            title: "首页",
            headerStyle: {
              backgroundColor: '#00b38a',
              elevation: 0, // 删除android阴影
              shadowOpacity: 0 // 删除ios阴影
            },
            headerTintColor: '#fff', // 导航条字体颜色
            headerRight: () => (
              <TouchableOpacity onPress={() => this.props.navigation.navigate('TakePhoto')} activeOpacity={1}>
                <Text style={{
                  fontSize: 14, color: '#fff', marginRight: 10
                }}>拍照</Text>
              </TouchableOpacity>
            )
          }}
        />
        <Stack.Screen options={
          {
            title: '拍照'
          }
        } screenName={'TakePhotoScreen'} name="TakePhoto" component={TakePhotoScreen} />
      </Stack.Navigator>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  text: {
    fontSize: 40
  }
})

